

<template>
  <div class="routerListDom">
    <div class="routerListDomItem" v-for="(item, index) in routerListData" :key="index">
      <router-link :to="item.name">
        <div class="routerListDomItemText" @click="routerListClick(item, index)">{{ item.title }}</div>
      </router-link>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const routerListData = ref([
  {
    title: '基本情况',
    name: 'JBQK',
  },
  {
    title: '经济运行',
    name: 'JJYX',
  },
  {
    title: '政务服务',
    name: 'ZWFW',
  },
  {
    title: '城市管理',
    name: 'CSGL',
  },
  {
    title: '党建建设',
    name: 'DJJS',
  }
])
// 点击路由跳转
function routerListClick(msg, index) {
  router.push(msg.title)
}
</script>
<style lang="less" scoped>
.routerListDom {
  width: 1085px;
  height: 80px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  .routerListDomItem a {
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-size: 18px;
    width: 134px;
    height: 51px;
    cursor: pointer;
    background-size: 134px 51px;
    text-align: center;
    line-height: 57px;
    margin-right: 22px;
  }

  .router-link-active {
    width: 134px;
    height: 51px;
    color: red !important;
    background-size: 134px 51px !important;

  }
}
</style>
